<template>
	<div class="book-list">
		<a href="" v-for="(item, index) in images" :key="index">
			<div class="book-item">
				<div class="image">
					<img :src="item.src" alt="" />
				</div>
				<div class="text">
					<h3 class="book-name">
						浪漫邊緣　我究竟能否跟又笨又蠢的青梅竹馬談戀愛？
					</h3>
					<p class="book-author">朝比奈 ヨウ</p>
					<el-text class="book-info">
						※每週五更新※ 經紀人（♀）×經紀人（♂） 我們各自負責的演員結婚了。
						說是這樣，但也跟我和那傢伙無關。 別扭又逞強的戀愛心意，將終歸何處？
						這不是命中注定的戀愛。 「你也差不多該放棄了吧。」
						——因為這是謊言。</el-text
					>
				</div>
			</div>
		</a>
	</div>
</template>

<script setup>
// 轮播图数据
const images = [
	{
		src: new URL("../assets/images/book1.jpg", import.meta.url),
	},
	{
		src: new URL("../assets/images/book1.jpg", import.meta.url),
	},
	{
		src: new URL("../assets/images/book1.jpg", import.meta.url),
	},
	{
		src: new URL("../assets/images/book1.jpg", import.meta.url),
	},
	{
		src: new URL("../assets/images/book1.jpg", import.meta.url),
	},
	{
		src: new URL("../assets/images/book1.jpg", import.meta.url),
	},
];
</script>

<style lang="scss" scoped>
.book-list {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 1rem;
	overflow: auto;
	a {
		display: grid;
	}
	.book-item {
		display: flex;
		position: relative;
		gap: 1rem;
		.image {
			display: block;
			flex: 0 0 auto;
			position: relative;
			box-shadow: rgba(203, 213, 224, 0.3) 0px 0px 2rem 0px;
			aspect-ratio: 7 / 10;
			width: 4.75rem;
			clip-path: inset(0px round 0.25rem);
			img {
				width: 100%;
				object-fit: fill;
				display: block;
				border-radius: 4px;
			}
		}
		.text {
			display: flex;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			gap: 0.5rem;
			.book-name {
				font-size: 0.875rem;
				font-weight: 500;
				line-height: 1.5;
				letter-spacing: 0.05em;
				color: #2d3748;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
			.book-author {
				font-size: 0.75rem;
				font-weight: 400;
				line-height: 1.625;
				letter-spacing: 0.05em;
				color: #2d3748;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				word-break: break-word;
			}
			.book-info {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: 0.75rem;
				font-weight: 400;
				line-height: 1.625;
				letter-spacing: 0.05em;
				color: #92aaca;
				word-break: break-word;
			}
		}
	}
}

@media screen and (min-width: 640px) {
	.book-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 768px) {
	.book-list {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media screen and (min-width: 1024px) {
	.book-list {
		grid-template-columns: repeat(5, 1fr);
	}
}

@media screen and (min-width: 1280px) {
	.book-list {
		grid-template-columns: repeat(3, 1fr);
	}
}
</style>